<template>
  <div class="class-box">
    <van-nav-bar title="分类"></van-nav-bar>
    <div class="app-upload" @click="toAppUpload" style="display:none">
      <img src="../../../static/img/appuploadbtn.jpg">
    </div>
    <div class="tool-box" >
        <div class="class-left"  v-for="(item, index) in data" @click="goAppList(index)">
          <b>{{ item.name }}</b>
          <span>{{item.engName}}</span>
          <img :src='item.logo'>
        </div>
    </div>
    <div style="clear:both"></div>
    <div class="class-redian">
      <h2><img class="rd-left" src="../../../static/img/rdclass.jpg"><span>热点分类</span></h2>
      <div class="rd-img-box">
        <img class="rd-left" @click="goAppList('is_eos')" src="../../../static/img/remen1.jpg">
        <img class="rd-right" @click="goAppList('is_necessary')" src="../../../static/img/remen2.jpg">
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {

  data () {
    return {
      data:[{
        "name":"交易所",
        "engName":"Exchanges",
        "logo":"../../../static/img/app1.jpg"
      },{
        "name":"钱包",
        "engName":"Wallet",
        "logo":"../../../static/img/app2.jpg"
      },{
        "name":"行情软件",
        "engName":"Market Software",
        "logo":"../../../static/img/app3.jpg"
      },{
        "name":"工具软件",
        "engName":"Tool Software",
        "logo":"../../../static/img/app4.jpg"
      },{
        "name":"新闻咨询",
        "engName":"News",
        "logo":"../../../static/img/app5.jpg"
      },{
        "name":"行业应用",
        "engName":"Industry Application",
        "logo":"../../../static/img/app6.jpg"
      },{
        "name":"区块链游戏",
        "engName":"Blockchain Games",
        "logo":"../../../static/img/app7.jpg"
      },{
        "name":"内容社区",
        "engName":"Content Community",
        "logo":"../../../static/img/app8.jpg"
      }]
    }
  },
  mounted() {
    // 设置tabbar的active
    active_g = 1
    var $this = this;
    document.getElementsByClassName("van-tabbar")[0].style = {};
    document.getElementsByClassName("van-tabbar")[0].style.display = "flex";

  },
  methods: {
    goAppList(index){
      if(index == "is_necessary"){
        sessionStorage.setItem("app_index","necessary");
      }else if(index == "is_eos"){
        sessionStorage.setItem("app_index","is_eos");
      }else{
        sessionStorage.setItem("app_index","0"+parseInt(index+1));
      }
      if(index === "is_necessary"){
        this.$router.push({
          path:'/applist',
          query: {
            title: "热门必备"
          }
        });
      }else if(index === "is_eos"){
        this.$router.push({
          path:'/applist',
          query: {
            title: "EOS钱包"
          }
        });
      }else{
        this.$router.push({
          path:'/applist',
          query: {
            title: this.data[index].name
          }
        });
      }
    },
    toAppUpload(){
      this.$router.push('/appupload');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .class-box{
    height: 100%;
    overflow-y:scroll;
  }
  .tool-box > div{
    position:relative;
    padding:15px 0px 15px 10px;
    border-radius:5px;
    margin-bottom:10px
  }
  .class-left{
    background-color:#fff;
    box-shadow: #d5e4fb 1px -1px 14px;
    float:left;
    margin-right:5px;
  }
  .tool-box > div b{
    display:block;
    font-size:16px;
    color:#000;
    display:block;
  }
  .tool-box > div span{
    font-size:12px;
    color:#a6a6a6;
  }
  .tool-box > div img{
    position:absolute;
    width:10%;
    right: 20px;
    top: 34%;
  }
  .class-right{
    background-color:#fff;
    box-shadow: #d5e4fb -1px -1px 14px;
  }
  .tool-box{
    width:95%;
    margin:0 auto;
    height:auto;
    padding:5px;
    clear:both;
  }
  .tool-box div{
    width:45%;
  }
  .tool-box > div:nth-child(2n){
    float:right;
    margin-right:0px;
    background-color:#fff;
    box-shadow: #d5e4fb -1px -1px 14px;
  }
  .class-redian{
    width:95%;
    margin:10px auto;
  }
  .class-redian h2{
    font-size:20px;
    color:#000;
  }
  .class-redian h2 img{
    width:2%;
    margin-right:10px;
    height:18px
  }
  .rd-img-box{
    width:100%;
  }
  .rd-img-box .rd-left{
    float:left;
    width:48%;
  }
  .rd-img-box .rd-right{
    float:right;
    width:48%;
  }
  .app-upload{
    width:92%;
    margin:10px auto;
  }
  .app-upload img{
    width:100%
  }
</style>
